<template>
  <transition name="list-fade">
    <!-- 全屏遮罩 -->
    <div v-show="showFlag" class="playlist" @click="hidden">

      <!-- 内容主体盒子 -->
      <!-- click.stop 防止向上冒泡 -->
      <div class="list-wrapper" @click.stop>

        <!-- 头部 -->
        <div class="list-header">
          <h1 class="title">
            <span class="sequence" @click="changeMode"><i :class="iconMode" class="icon"/></span>
            <span class="text">{{ modeText() }}</span>
            <span class="clear" @click="showConfirm"><i class="icon-clear"/></span>
          </h1>
        </div>

        <!-- 列表位置 -->
        <scroll ref="listContent" :data="sequenceList" :refresh-delay="refreshDelay" class="list-content">
          <!-- 这里有一个100毫秒的删除动画会导致scroll计算不准确 -->
          <transition-group name="list" tag="ul">
            <li v-for="(item, index) in sequenceList" ref="listItem" :key="item.id" :data-id="item.id" class="item" @click="selectItem(item, index)">
              <i :class="getCurrentIcon(item)" class="current"/>
              <span class="text" v-html="item.name"/>
              <span class="like" @click.stop="toggleFavorite(item)">
                <i :class="getFavoriteIcon(item)" class="icon"/>
              </span>
              <span class="delete" @click.stop="deleteOne(item)">
                <i class="icon-delete"/>
              </span>
            </li>
          </transition-group>
        </scroll>

        <!-- 添加队列 -->
        <div class="list-operate">
          <div class="add" @click="addSong">
            <i class="icon-add"/>
            <span class="text">添加歌曲到队列</span>
          </div>
        </div>

        <!-- 关闭 -->
        <div class="list-close" @click="hidden">
          <span class="closetext">关闭</span>
        </div>

      </div>

      <!-- 弹框组件 -->
      <confirm ref="confirm" text="时候清空播放列表?" cancel-btn-text="取消🙂" confirm-btn-text="确定🙁" @cancel="cancelBtn" @confirm="confirmBtn"/>
      <add-song ref="addsong"/>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import { mapActions } from 'vuex'
import { playMode } from 'common/js/config'
import Scroll from 'base/scroll/scroll'
import Confirm from 'base/confirm/confirm'
import { playerMixin } from 'common/js/mixin'
import AddSong from 'components/add-song/add-song'
export default{
  mixins: [playerMixin],
  data () {
    return {
      showFlag: false,
      refreshDelay: 100
    }
  },
  computed: {
    // modeText () {
    //   return this.mode === playMode.sequence ? '顺序播放' : this.mode === playMode.loop ? '循环播放' : '随机播放'
    // }
  },
  methods: {
    modeText () {
      return this.mode === playMode.sequence ? '顺序播放' : this.mode === playMode.loop ? '循环播放' : '随机播放'
    },
    show () {
      this.showFlag = true
      // 由于是在显示与隐藏之间切换 我们需要在显示之后重新计算 重新初始化 显示之后需要重新手动刷新
      clearTimeout(this.time)
      this.time = setTimeout(() => {
        this.$refs.listContent.refresh()
        this.scrollToCurrent(this.currentSong)
      }, 20)
    },
    hide () {
      this.showFlag = false
    },
    // 用户点击全屏遮罩
    hidden () {
      this.hide()
    },
    // 列表当前播放歌曲
    getCurrentIcon (item) {
      return item.id === this.currentSong.id ? 'icon-play' : ''
    },
    // 当前播放歌曲在顶部
    scrollToCurrent (current) {
      const index = this.sequenceList.findIndex((item, index) => {
        return item.id === current.id
      })
      console.log(this.$refs.listItem[index])
      this.$refs.listContent.scrollToElement(this.$refs.listItem[index], 400)
    },
    selectItem (item, index) {
      if (this.mode === playMode.random) {
        index = this.playlist.findIndex((song, index) => {
          return song.id === item.id
        })
      }
      this.setCurrentIndex(index)
      if (!this.playing.length) {
        this.setPlayingState(true)
      }
    },
    // 用户点击单个删除按钮
    deleteOne (item) {
      this.deleteSong(item)
      if (!this.playlist.length) {
        this.hide()
      }
    },
    // 用户点击全部删除按钮
    showConfirm () {
      this.$refs.confirm.show()
    },
    // 用户点击取消按钮
    cancelBtn () {},
    // 用户点击确认删除按钮
    confirmBtn () {
      this.deleteSongList()
      this.hide()
    },
    addSong () {
      this.$refs.addsong.show()
    },
    ...mapActions(['deleteSong', 'deleteSongList'])
  },
  watch: {
    currentSong (newSong, oldSong) {
      // 点击的歌曲是一样的 或者 列表没有展开 我们就不要歌曲置顶
      if (!this.showFlag || newSong.id === oldSong.id) {
        return false
      }
      this.scrollToCurrent(newSong)
    }
  },
  components: { Scroll, Confirm, AddSong }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
  .playlist
    position fixed;
    top 0;
    bottom 0;
    left 0;
    right 0;
    z-index 200;
    background-color: rgba(0, 0, 0, 0.6);
    &.list-fade-enter-active, &.list-fade-leave-active{
      transition all .4s;
      .list-wrapper{
        transition all .4s;
      }
    }
    &.list-fade-enter, &.list-fade-leave-to{
      opacity 0;
      .list-wrapper{
        transform translate3d(0, 100%, 0);
      }
    }
    .list-wrapper
      position absolute;
      bottom 0;
      left 0;
      right 0;
      background-color $color-highlight-background;
      .list-header
        padding 20px 30px 10px 20px;
        .title
          display flex;
          align-items center;
          .sequence
            font-size 30px;
            color $color-theme-d;
          .text
            flex 1;
            color $color-text-l;
            padding-left 10px;
            font-weight bold;
          .clear
            color $color-text-l;
            extend-click();
      .list-content
        max-height 40vh
        padding 0 30px 0 20px;
        overflow hidden;
        .item
          display flex;
          align-items center;
          height 40px;
          overflow hidden;
          &.list-enter-active, &.list-leave-active
            transition all .4s;
          &.list-enter, &.list-leave-to
            height 0;
          .current
            width 20px;
            margin-right 10px;
            color $color-theme-d;
          .text
            flex 1;
            color $color-text-d;
            display: -webkit-box;
            overflow: hidden;
            white-space: normal!important;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            line-height 1.2;
          .like
            display flex;
            color $color-theme;
            font-size $font-size-small;
            margin-right 20px;
            extend-click();
            .icon-favorite
              color $color-sub-theme;
          .delete
            display flex;
            color $color-theme;
            font-size $font-size-small;
            extend-click();
      .list-operate
        padding 20px;
        .add
          width 50%;
          margin 0 auto;
          border 1px solid rgba(255,255,255,0.5);
          padding 10px;
          border-radius 20px;
          font-size 12px;
          display flex;
          align-items center;
          justify-content center;
          color $color-text-l;
          .icon-add
            margin-right 10px;
      .list-close
        background-color $color-background-d;
        height 8vh;
        color $color-text-l;
        display flex;
        align-items center;
        justify-content center;
        .closetext
          font-weight bold;
</style>
